.comment-card-box {
  background-color: #eee;
  .rating-box {
    display: flex;
    padding: 1rem;
    background-color: #fff;
    .rating-left {
      padding-right: 1rem;
      text-align: center;
      border-right: 1px solid #eee;
      .score {
        font-size: 2.6rem;
        color: #f60;
      }
      .judge-big {
        font-size: 1.2rem;
      }
      .judge-small {
        font-size: 1rem;
        color: #999;
      }
    }
    .rating-right {
      padding-left: 1.6rem;
      font-size: 1.2rem;
      color: #666;
      line-height: 1.8;
      .tags-text {
        display: flex;
        align-items: center;
        .score-num {
          color: #f60;
        }
        .time {
          font-size: 1rem;
          color: #999;
        }
      }
    }
  }
  .ml {
    margin-left: 1rem;
  }
  .mr {
    margin-right: 1rem;
  }

  .comment-list-wrapper {
    margin-top: 1rem;
    border-bottom: 1px solid #eee;
    background-color: #fff;
    .comment-tags {
      display: flex;
      justify-content: space-between;
      padding: 1rem;
      border-bottom: 1px solid #eee;
      .comment-tag {
        font-size: 1.2rem;
        padding: .5rem .8rem;
        border-radius: 4px;
      }
      .tag1 {
        color: #333;
        background-color: #ebf5ff;
      }
      .tag1.active {
        color: #fff;
        background-color: #3190e8;
      }
      .tag2 {
        color: #aaa;
        background-color: #f5f5f5;
      }
      .tag2.active {
        color: #fff;
        background-color: #ccc;
      }
    }
    .comment-list-box {
      .comment-list {
        display: flex;
        padding: 1.2rem 0;
        margin: 0 1.2rem;
        border-bottom: 1px solid #eee;
        .user-avatar {
          width: 2.6rem;
          height: 2.6rem;
          border-radius: 50%;
        }
        .comment-main {
          flex: 1;
          display: flex;
          flex-direction: column;
          margin-left: 1rem;
          .user-name {
            margin-bottom: .6rem;
            font-size: 1.2rem;
            color: #666;
          }
          .comment-star {
            margin-bottom: .6rem;
          }
          .comment-text {
            font-size: 1.2rem;
            color: #666;
            margin-bottom: .5rem;
            line-height: 1.1;
          }
          .comment-img-wrapper {
            display: flex;
            flex-wrap: wrap;
            margin-top: .5rem;
            .img-box {
              width: 6rem;
              height: 6rem;
              margin-right: .8rem;
              margin-bottom: .8rem;
            }
            .comment-img {
              width: 100%;
              height: 100%;
            }
          }
          .recommend-list {
            margin-top: .5rem;
            .recommend-tag {
              display: inline-block;
              width: 5rem;
              line-height: 1.8rem;
              margin-right: .6rem;
              padding: 0 .8rem;
              color: #999;
              overflow: hidden;
              white-space: nowrap;
              text-overflow: ellipsis;
              border: 1px solid #eee;
            }
          }
        }
      }
    }
  }
}